<template>
  <el-aside class="menu" :width="menuType ? '64px' : '260px'">
    <div class="_logo" @click="setMenuType(!menuType)">logo</div>
    <el-scrollbar class="_scrollbar">
      <el-menu class="_menu" :collapse="menuType">
        <el-submenu>
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">导航一</span>
          </template>
          <el-menu-item-group>
            <el-menu-item>
              11111
            </el-menu-item>
            <el-menu-item>
              22222
            </el-menu-item>
            <el-menu-item>
              11111
            </el-menu-item>
            <el-menu-item>
              22222
            </el-menu-item>
            <el-menu-item>
              11111
            </el-menu-item>
            <el-menu-item>
              22222
            </el-menu-item>
            <el-menu-item>
              11111
            </el-menu-item>
            <el-menu-item>
              22222
            </el-menu-item>
            <el-menu-item>
              11111
            </el-menu-item>
            <el-menu-item>
              22222
            </el-menu-item>
            <el-menu-item>
              11111
            </el-menu-item>
            <el-menu-item>
              22222
            </el-menu-item>
            <el-menu-item>
              11111
            </el-menu-item>
            <el-menu-item>
              22222
            </el-menu-item>
            <el-menu-item>
              11111
            </el-menu-item>
            <el-menu-item>
              22222
            </el-menu-item>
            <el-menu-item>
              11111
            </el-menu-item>
            <el-menu-item>
              22222
            </el-menu-item>
            <el-menu-item>
              11111
            </el-menu-item>
            <el-menu-item>
              22222
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-scrollbar>
  </el-aside>
</template>
<script>
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'AMenu',
  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {
    ...mapState({
      menuType: state => state.menu.type
    })
  },
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    ...mapMutations({
      setMenuType: 'menu/setMenuType'
    })
  }
}
</script>
<style lang="scss">
@include admin {
  .menu {
    height: 100%;
    transition: width 0.3s;
    box-shadow: 0px 0px 10px;
    ._logo {
      height: 60px;
    }
    ._scrollbar {
      height: calc(100% - 60px);
      .el-scrollbar__wrap {
        overflow-x: hidden;
      }
      ._menu {
        width: 100%;
        border: 0;
      }
    }
  }
}
</style>
